import { useNavigate, useSearchParams } from 'react-router-dom'
import styles from '../css/train.module.css'

function TicketItem(props) {
  const nav = useNavigate()
  const [sp] = useSearchParams()

  const gotoDetail = () => {
    nav(
      `/detail/${props.id}?start=${props.startStation}&end=${
        props.endStation
      }&date=${sp.get('date')}`
    )
  }

  return (
    <div
      className={styles.ticketItemBox}
      onClick={gotoDetail}
    >
      {/* 第一行 */}
      <span className={styles.sp1}>发车 {props.startTime}</span>
      <span className={styles.sp2}>{props.startStation}</span>
      <span className={styles.sp3}>{props.trainNo}</span>
      <span className={styles.sp4}>￥{props.ssoftSeat.price}</span>

      {/* 第二行 */}
      <span className={styles.sp5}>
        到达 {props.endTime}
        {props.isNextDay && <span style={{ color: 'red' }}> +1</span>}
      </span>
      <span className={styles.sp6}>{props.endStation}</span>
      <span className={styles.sp7}>耗时{props.timeTaken}</span>
      <span className={styles.sp8}>
        二等座：{props.ssoftSeat.ticketNum}
        {typeof props.ssoftSeat.ticketNum === 'number' ? '张' : ''}
      </span>
    </div>
  )
}

export default TicketItem
